<script lang="js" setup>
import {createDiscreteApi, NButton, NIcon, NInput} from "naive-ui";
import {Close} from "@vicons/ionicons5";


const props = defineProps({
  item: {
    type: Object,
    default: () => {
    }
  },
  index: {
    type: Number,
    default: 0
  }
})

const emits = defineEmits(['change'])


const modelValue = ref(props.item.user_value)


watch(modelValue, (newVal) => {
  emits('change', newVal)
}, {
  deep: true
})

// 单选多选是否选中
const isActive = (v) => {
  const {item} = props;
  if (item.type === "radio" || item.type === "trueOrfalse") {
    return v === modelValue.value
  }
  return modelValue.value.includes(v)
}

// 移除填空
const remove = (i) => {
  const {dialog} = createDiscreteApi(['dialog'])
  dialog.warning({
    content: "是否要删除该填空?",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: () => {
      modelValue.value.splice(i, 1)
    }
  })
}

// 添加
const add = () => {
  modelValue.value.push("")
}


const handleChooseOption = (val) => {
  const {item} = props;
  // 单选
  if (item.type === "radio" || item.type === "trueOrfalse") {
    modelValue.value = val === modelValue.value ? -1 : val;
  }

  // 多选
  else {
    let i = modelValue.value.findIndex(v => v === val)
    if (i === -1) {
      modelValue.value.push(val)
    } else {
      modelValue.value.splice(i, 1)
    }
  }
}

// 题目类型
const typeOptions = {
  answer: "问答题",
  completion: "填空题",
  trueOrfalse: "判断题",
  checkbox: "多选题",
  radio: "单选题"
}


// 选项转化
const en = {
  0: "A",
  1: "B",
  2: "C",
  3: "D",
  4: "E",
  5: "F",
  6: "G",
  7: "H",
  8: "I",
  9: "J",
  10: "K",
  11: "L",
  12: "M",
  13: "N",
  14: "O",
  15: "P",
  16: "Q",
  17: "R",
  18: "S",
  19: "T",
  20: "U",
  21: "V",
  22: "W",
  23: "X",
  24: "Y",
  25: "Z"
}

</script>

<template>
  <div class="test-item">
    <div class="title">
      第 {{ index + 1 }} 题 {{ typeOptions[item.type] }}
    </div>

    <div class="p-4">
      <!-- 标题-->
      <p class="mb-5 " v-html="item.title"></p>

      <!-- 题目选项-->
      <div v-if="item.type === 'radio' || item.type === 'checkbox'  || item.type === 'trueOrfalse'">
        <p class="tip">答案：</p>
        <ul>
          <li v-for="(q,qI) in item.options" :key="qI" :class="{active:isActive(qI)}" class="option"
              @click="handleChooseOption(qI)">
            <span class="mr-2">{{ en[qI] }}</span>
            <div v-html="q"></div>
          </li>
        </ul>
      </div>


      <!-- 填空题 -->
      <div v-else-if="item.type === 'completion'">
        <div v-for="(uv,uvI) in modelValue" :key="uvI" class="mb-3 border rounded p-3">
          <div class="flex items-center justify-between mb-3 ">
            <h5 class="text-sm ">填空 {{ uvI + 1 }}</h5>
            <n-icon v-if="uvI > 0" @click="remove(uvI)">
              <Close/>
            </n-icon>
          </div>
          <n-input v-model:value="modelValue[uvI]" :placeholder=" '填空' + (uvI + 1)" type="textarea"/>
        </div>


        <n-button class="w-full my-3" dashed type="primary" @click="add">
          添加填空
        </n-button>

      </div>

      <!-- 问答 -->
      <div v-else>
        <div class="mb-3 border rounded p-3">
          <n-input v-model:value="modelValue[0]" placeholder="请填写内容" type="textarea"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.test-item {
  @apply shadow rounded mb-5;
}

.test-item .title {
  @apply bg-gray-100 p-4 border-b text-sm;
}

.test-item .tip {
  @apply text-xs mb-3 text-gray-500;
}

.test-item .option {
  transition: all 0.2s;
  @apply flex border p-2 rounded text-sm mb-2 cursor-pointer;
  @apply hover:(border-light-blue-500 bg-light-blue-50 text-light-blue-600);
  @apply active:(border-light-blue-200);
}

.test-item .active {
  @apply border-light-blue-500 bg-light-blue-50 text-light-blue-600;
}
</style>
